import Cubox from '../Cubox';

import colorScheme from '../assets/color-scheme';

import styles from './input.module.css';

const Input = ({value="", onChange, isDisabled, type, color='blue', className, children, ...props}) => {

  const [back, fore, text] = isDisabled
  ? ['base01', 'base01', 'base06']  
  : [color, 'base00', 'base06'];

  const QBOXProps = {
		cornerRadius: 20, 
		strokeWidth: 1, 
		isOutlined: true,
		backColor: colorScheme[back],
		foreColor: colorScheme[fore],
	};

  const style = {
    color:colorScheme[text],
  }

  const inputProps = {
    spellCheck: false,
    value,
    onChange,
    className:`${styles['input']} ${styles[`input-${type}`]} ${className}`,
    style,
    type,
    disabled: isDisabled,
    ...props
  }

  return <Cubox {...QBOXProps} >
    <input {...inputProps}>{children}</input>
  </Cubox>
}

export default Input;